<!-- 统计面板 -->
<template>
  <div class="sa-block" v-show="isShowZongpingStatistics">
    <el-row style="font-size: 18px; color: black; padding: 8px;">
      <span>统计面板</span>
      <el-button style="position:absolute; right: 8px; top: 12px;" type="" link @click="toggleShowZongpingStatistics">
        <el-icon>
          <Close />
        </el-icon>
      </el-button>
      <el-divider style="margin: 1px 0; width: 95%" />
    </el-row>
    <el-row justify="center">
      <el-col :span="12">
        <el-statistic title="建筑总面积（万㎡）" :value="(indexData[0] / 10000).toFixed(2) ?? 0" />
      </el-col>
      <el-col :span="12">
        <el-statistic title="计算容积率建筑面积（万㎡）" :value="(indexData[1] / 10000).toFixed(2) ?? 0" />
      </el-col>
      <el-divider style="width: 95%" />
    </el-row>
    <el-row justify="center">
      <div style="width: 100%; height: 350px; position: relative;">
        <span v-if="!showChartByTime"
          style="width: 200px; position:absolute; top: -3px; left: 21.5px; font-weight: 700; font-size: 18px;">时间分布</span>
        <ZongpingMutiYAxis v-show="showChartByTime" />
        <el-table :data="timeTableData"
          style="margin-left: 40px;top: 40px; width: 90%; height: 320px; overflow-y: auto;" v-show="!showChartByTime">
          <el-table-column prop="date" label="月份" width="180" />
          <el-table-column prop="ds" label="案件数" />
          <el-table-column prop="areas" label="总建筑面积（万㎡）" />
        </el-table>
        <el-select v-model="yearSelect" placeholder="Select" size="small"
          style="width: 80px; position:absolute; top: 0; right: 90px" @change="handleOnTimeChange">
          <el-option v-for="item in yearOptions" :key="item" :label="item" :value="item" />
        </el-select>
        <el-button style="width: 10px; position:absolute; top: 0; right: 40px" text :icon="Document" circle
          @click="handleOnClick1" />
      </div>
      <el-divider style="width: 95%" />
    </el-row>
    <el-row justify="center">
      <div style="width: 100%; height: 375px; position: relative;">
        <span v-if="!showChartByZJ"
          style="width: 200px; position:absolute; top: -3px; left: 21.5px; font-weight: 700; font-size: 18px;">区域分布</span>
        <ZongpingBYMap v-show="showChartByZJ" />
        <el-table :data="zjTableData" style="margin-left: 40px;top: 40px; width: 90%; height: 340px; overflow-y: auto;"
          v-show="!showChartByZJ">
          <el-table-column prop="name" label="街镇" width="180" />
          <el-table-column prop="value" label="总建筑面积（万㎡）" />
        </el-table>
        <el-button style="width: 10px; position:absolute; top: 0; right: 40px" text :icon="Document" circle
          @click="handleOnClick2" />
      </div>
      <el-divider style="width: 95%" />
    </el-row>
    <el-row justify="center">
      <span v-if="!showChartByGn"
        style="width: 200px; position:absolute; top: -3px; left: 21.5px; font-weight: 700; font-size: 18px;">主要功能建筑面积</span>
      <div style="width: 100%; height: 350px;">
        <BYZongPingPie v-show="showChartByGn" />
        <el-table :data="gnTableData" style="margin-left: 40px;top: 40px; width: 90%; height: 320px; overflow-y: auto;"
          v-show="!showChartByGn">
          <el-table-column prop="name" label="是否涉及机场限高" width="180" />
          <el-table-column prop="value" label="数量" />
        </el-table>
        <el-button style="width: 10px; position:absolute; top: 0; right: 40px" text :icon="Document" circle
          @click="handleOnClick3" />
      </div>
      <el-divider style="width: 95%" />
    </el-row>
  </div>
</template>

<script setup>
import { Close, Document } from '@element-plus/icons-vue';
import { useStore } from '@/store/useStore';
import { storeToRefs } from 'pinia';
import { ref, onMounted, watch } from 'vue';
import ZongpingMutiYAxis from '@/components/ZongpingMutiYAxis.vue';
import ZongpingBYMap from '@/components/ZongpingBYMap.vue';
import BYZongPingPie from '@/components/BYZongPingPie.vue';
import { getAirportHeightRestrictionAnalysis, getMasterPlanStatistics, getYearsForWcsj, getMasterPlanMonthStatistics, getMasterPlanCountByDistrict } from '@/api/dataApi';

const store = useStore();
const { isShowZongpingStatistics } = storeToRefs(store);
const { toggleShowZongpingStatistics } = store;

// 指标统计
const indexData = ref([]);
const loadDataByIndex = async () => {
  await getMasterPlanStatistics(store.searchParams).then((res) => {
    const data = res.data.data;
    indexData.value = data;
  });
};

// 按完成时间统计
const yearOptions = ref([])
const yearSelect = ref(2024)
const showChartByTime = ref(true);
const loadDataByTime = async () => {
  await getYearsForWcsj(store.searchParams).then((res) => {
    yearOptions.value = res.data.data;
    yearSelect.value = yearOptions.value[0];
  });
  await getMasterPlanMonthStatistics({ ...store.searchParams, year: yearSelect.value }).then(res => {
    store.$patch({ areasAndCountByTime: res.data.data })
  })
  loadDataByTimeTable();
}

const handleOnTimeChange = async () => {
  await getMasterPlanMonthStatistics({ ...store.searchParams, year: yearSelect.value }).then(res => {
    store.$patch({ areasAndCountByTime: res.data.data })
  })
  loadDataByTimeTable();
}

const timeTableData = ref([]);

const loadDataByTimeTable = () => {
  timeTableData.value = store.areasAndCountByTime.map((item) => ({
    date: item.master_plan_month + '月',
    ds: item.value,
    areas: (item.key / 10000).toFixed(2)
  }));
}
const handleOnClick1 = () => {
  showChartByTime.value = !showChartByTime.value;
}

// 按镇街统计
const showChartByZJ = ref(true);
const zjTableData = ref([]);
const loadDataByZJ = async () => {
  await getMasterPlanCountByDistrict(store.searchParams).then(res => {
    store.$patch({
      mapByDataZP: res.data.data.map(item => ({ name: item.town_name, value: item.dkzjzmj_sum ?? 0 })),
    })
  })
  zjTableData.value = store.mapByDataZP.map(item => ({ name: item.name, value: (item.value / 10000).toFixed(2) }));
}

const handleOnClick2 = () => {
  showChartByZJ.value = !showChartByZJ.value;
}

// 按主要功能统计

const showChartByGn = ref(true);
const gnTableData = ref([]);
const loadDataByGn = async () => {
  await getAirportHeightRestrictionAnalysis(store.searchParams).then((res) => {
    store.$patch({ dataByJc: res.data.data.map(item => ({ name: item.key, value: item.value })) })
  });
  console.log(store.dataByJc);
  gnTableData.value = store.dataByJc;
}

const handleOnClick3 = () => {
  showChartByGn.value = !showChartByGn.value;
}


/**
 * 加载数据的函数
 *
 * 调用多个函数以加载不同类型的数据
 */
const loadData = () => {
  loadDataByTime();
  loadDataByGn();
  loadDataByZJ();
  loadDataByIndex();
}

watch(() => store.searchParams, () => {
  loadData()
}, { deep: true })

watch(isShowZongpingStatistics, (val) => {
  if (val) {
    loadData();
  }
})

onMounted(() => {
  // loadData();
})
</script>

<style scoped>
.sa-block {
  z-index: 2002;
  position: fixed;
  right: 0;
  top: 0;
  height: 100%;
  width: 550px;
  background-color: white;
  overflow-y: auto;
  overflow-x: hidden;
}

.el-col {
  padding-top: 20px;
  text-align: center;
}
</style>

<style>
.el-statistic__number {
  font-size: 24px;
  font-weight: 600;
}
</style>
